<template>
  <div>
    <el-container style="height:800px; border: 1px solid #eee">
      <el-header style="text-align: right; font-size: 12px">
        <el-button type="primary" @click="addDialog =true" v-if="userAuth === 'admin'">上传<i class="el-icon-upload el-icon--right"></i></el-button>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="logOut">退出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu
            :default-active="$route.path"
            router
            :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>工时菜单</template>
              <el-menu-item-group>
                <el-menu-item index="/workTime">月工时明细</el-menu-item>
                <el-menu-item index="/ioNumberInfo">Summary</el-menu-item>
<!--                <el-menu-item index="/fileUpload">Excel文件上传</el-menu-item>-->
                <el-menu-item index="/userInfo" v-if="userAuth === 'admin'">用户信息</el-menu-item>
                <el-menu-item index="/userLog" v-if="userAuth === 'admin'">操作记录</el-menu-item>
              </el-menu-item-group>

            </el-submenu>

          </el-menu>
        </el-aside>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <el-dialog
      title="文件上传"
      :visible.sync="addDialog"
      width="50%">
      <div>
        <el-upload
          class="upload-demo"
          action="/fileUploads"
          :limit="3"
          :file-list="fileList"
          :http-request="workFileUpload">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { workFileUpload } from '../api/api'

export default {
  name: 'WorkTime',
  data () {
    return {
      userName: '',
      userAuth: 'normal',
      fileList: [],
      addDialog:false
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      let item = window.localStorage.getItem('userInfo')
      this.userName = item
      let userAuth = window.localStorage.getItem('userAuth')
      this.userAuth = userAuth
    },
    logOut () {
      window.localStorage.setItem('userInfo', '')
      window.localStorage.setItem('userAuth', '')
      this.$router.push({ path: '/' })
    },
    async workFileUpload (file) {
      var formData = new FormData()
      formData.append('file', file.file)
      var newVar = await workFileUpload(formData)
      alert('数据上传成功')
      this.addDialog = false;
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>